<template>
  <div>
    <el-form
      :inline="true"
      size="mini">
      <el-form-item :label="`已选数据下载 [ ${currentTableData.length} ]`">
        <el-button-group>
          <el-button
            type="primary"
            size="mini"
            :disabled="currentTableData.length === 0"
            @click="handleDownloadXlsx(currentTableData)">
            xlsx
          </el-button>
          <el-button
            type="primary"
            size="mini"
            :disabled="currentTableData.length === 0"
            @click="handleDownloadCsv(currentTableData)">
            csv
          </el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item :label="`已选数据下载 [ ${multipleSelection.length} ]`">
        <el-button-group>
          <el-button
            type="primary"
            size="mini"
            :disabled="multipleSelection.length === 0"
            @click="handleDownloadXlsx(multipleSelection)">
            xlsx
          </el-button>
          <el-button
            type="primary"
            size="mini"
            :disabled="multipleSelection.length === 0"
            @click="handleDownloadCsv(multipleSelection)">
            csv
          </el-button>
        </el-button-group>
      </el-form-item>
    </el-form>

    <el-table
      :data="currentTableData"
      v-loading="loading"
      size="mini"
      stripe
      style="width: 100%;"
      @selection-change="handleSelectionChange">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column label="昵称" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{scope.row.nickname}}
        </template>
      </el-table-column>

      <el-table-column label="电话" width="100" align="center">
        <template slot-scope="scope">
            {{scope.row.phone}}
        </template>
      </el-table-column>
      <el-table-column label="真实姓名" width="100">
        <template slot-scope="scope">
          {{scope.row.realname}}
        </template>
      </el-table-column>

      <el-table-column label="用户名" width="100" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{scope.row.username}}
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="150" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{scope.row.create_time | moment("YYYY-MM-DD HH:mm:ss")}}
        </template>
      </el-table-column>

      <el-table-column label="状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag
            size="mini"
            :type="scope.row.user_status ? 'info' : ''">
            {{scope.row.user_status == 1 ? '禁用' : '正常'}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="handleEditRow(scope.$index)"
          type="text"
          size="small">
          编辑
        </el-button>
         <el-button
          @click.native.prevent="handleDeleteRow(scope.$index)"
          type="text"
          size="small">
          删除
        </el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { DeleteUser } from '@/api/sys/user'
export default {
  components: {
  },
  props: {
    tableData: {
      default: () => []
    },
    loading: {
      default: false
    }
  },
  data () {
    return {
      currentTableData: [],
      multipleSelection: [],
      downloadColumns: [
        { label: '昵称', prop: 'nickname' },
        { label: '电话', prop: 'phone' },
        { label: '用户名', prop: 'username' },
        { label: '创建时间', prop: 'create_time' }
      ]
    }
  },
  watch: {
    tableData: {
      handler (val) {
        this.currentTableData = val
      },
      immediate: true
    }
  },
  methods: {
    handleSwitchChange (val, index) {
      const oldValue = this.currentTableData[index]
      this.$set(this.currentTableData, index, {
        ...oldValue,
        type: val
      })
      // 注意 这里并没有把修改后的数据传递出去 如果需要的话请自行修改
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleEditRow (index) {
      const row = this.currentTableData[index]
      this.$router.push('/sys/user/edit/' + row.user_id)
    },
    handleDeleteRow (index) {
      const row = this.currentTableData[index]

      this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteUser({ id: row.user_id })
          .then(res => {
            this.loading = false
            if (res.status === '200') {
              // this.currentTableData.splice(index, 1)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              // 触发数据刷新
              this.$emit('change')
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
          .catch(err => {
            this.loading = false
            this.$message({
              type: 'error',
              message: '删除失败!'
            })
            console.log('err', err)
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    downloadDataTranslate (data) {
      return data.map(row => ({
        ...row,
        type: row.type ? '禁用' : '正常',
        used: row.used ? '已使用' : '未使用'
      }))
    },
    handleDownloadXlsx (data) {
      this.$export.excel({
        title: 'D2Admin 表格示例',
        columns: this.downloadColumns,
        data: this.downloadDataTranslate(data)
      })
        .then(() => {
          this.$message('导出表格成功')
        })
    },
    handleDownloadCsv (data) {
      this.$export.csv({
        title: 'D2Admin 表格示例',
        columns: this.downloadColumns,
        data: this.downloadDataTranslate(data)
      })
        .then(() => {
          this.$message('导出CSV成功')
        })
    }
  }
}
</script>
